<template>
  <div>
    <button @click="add">add</button>
    <button @click="remove">remove</button>
    <div id="maina" style="width: 100px; height: 100px; background-color: red;"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {},
  created(){
    console.log('ee')
    this.lastTime = new Date();
    this.timer = null;
    // window.addEventListener('mousemove', this.throttle);
  },
  destroyed() {
    // window.removeEventListener('mousemove', this.throttle);
  },
  methods: {
    add(){
      let maina = document.getElementById('maina');
      maina.addEventListener('mousemove', this.throttle)
    },
    remove(){
      let maina = document.getElementById('maina');
      maina.removeEventListener('mousemove', this.throttle)
    },
    throttle(){
      let startTime = new Date();
      let remaining = 4000 - (startTime-this.lastTime);
      if(this.timer)
        clearTimeout(this.timer);
      if(startTime-this.lastTime>4000) {
        this.lastTime = startTime;
      } else {
        this.timer = setTimeout(()=>{
          console.log('aaa')
        }, remaining);
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
